<template>
  <div class="help">
    <div v-title data-title="勤工俭学"></div>
    <!-- Start of Page Container -->
    <div class="page-container">
      <div class="container">
        <div class="row">
          <!-- start of page content -->
          <div class="span8 page-content">
            <div>
              <h3 class="title">勤工俭学</h3>
            </div>
            <!-- Navigation for work categories -->
            <ul class="tabs-nav">
              <li :class="pagelistquery.lable === '' ? 'active' : ''" @click="changelable('')">
                <a>全部工作</a>
              </li>
              <li v-for="(category, index) in workCategories" :key="index"
                :class="pagelistquery.lable === category ? 'active' : ''" @click="changelable(category)">
                <a>{{ category }}</a>
              </li>
            </ul>
            <section class="widget">
              <ul class="articles">
                <li class="article-entry standard" v-for="(work, id) in workList" :key="id">
                  <h4>
                    <router-link :to="'/studyworkcontent/' + work.work_id">{{ work.work_title }}</router-link>
                  </h4>
                  <span class="article-meta">
                    <a class="iconfont">&#xe619;</a>
                    {{ work.createtime | dataFormat }}
                    <a class="iconfont" style="margin-left: 50px;">&#xe609;</a>
                    {{ work.work_locale }}
                  </span>
                  <span class="like-count">
                    <span class="like-count">
                      <a class="iconfont">&#xe61c;</a>{{ work.work_read_num }}
                    </span>
                  </span>
                </li>
              </ul>
            </section>
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next"
              :total="pagelistquery.total"></el-pagination>
          </div>
          <!-- end of page content -->
          <!-- start of sidebar -->
          <aside class="span4 page-sidebar">
            <carousel />
            <activity />
          </aside>
          <!-- end of sidebar -->
        </div>
      </div>
    </div>
    <!-- End of Page Container -->
  </div>
</template>

<script>
export default {

  data() {
    return {
      workCategories: ['图书馆', '实验室', '办公室', '其他'], // 进一步详细的分类
      pagelistquery: {
        lable: "",
        total: 0,
        pagesize: 10,
        page: 1
      },
      workList: []
    };
  },
  methods: {
    changelable(lable) {
      this.pagelistquery.lable = lable;
      this.fetchWorkList();
    },
    async fetchWorkList() {
      try {
        let res = await this.$axios.post(
          "/web/getWorkList",
          this.qs.stringify(this.pagelistquery)
        );
        if (res.data.state.type === "SUCCESS") {
          this.workList = res.data.data;
          this.pagelistquery.total = res.data.count;
        }
      } catch (error) {
        console.error("发生错误:", error);
      }
    },
    handleCurrentChange(newPage) {
      this.pagelistquery.page = newPage;
      this.fetchWorkList();
    }
  },
  created() {
    this.fetchWorkList();
  }
};
</script>

<style>
.help {
  min-height: 200px;
}
</style>